<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head lang="en">
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<title>jpCalendar Documentation</title>
	<!-- Framework CSS -->
	<link rel="stylesheet" href="assets/blueprint-css/screen.css" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="assets/blueprint-css/print.css" type="text/css" media="print">
	<!--[if lt IE 8]><link rel="stylesheet" href="assets/blueprint-css/ie.css" type="text/css" media="screen, projection"><![endif]-->
	<link rel="stylesheet" href="assets/blueprint-css/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
	<style type="text/css" media="screen">
		p, table, hr, .box { margin-bottom:25px; }
		.box p { margin-bottom:10px; }
	</style>
</head>


<body>
	<div class="container">
	
		<h3 class="center alt">&ldquo;jpCalendar&rdquo; Documentation by &ldquo;wjp1110&rdquo; v1.0</h3>
		
		<hr>
		
		<h1 class="center">&ldquo;jpCalendar&rdquo;</h1>
		
		<div class="borderTop">
			<div class="span-6 colborder info prepend-1">
				<p class="prepend-top">
					<strong>
					Created: 10/01/2015<br>
					By: wujianping<br>
					Email: <a href="mailto:474790700@qq.com">474790700@qq.com</a>
					</strong>
				</p>
			</div><!-- end div .span-6 -->		
	
			<div class="span-12 last">
				<p class="prepend-top append-0">Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form <a href="http://themeforest.net/user/wjp1110">here</a>. Thanks so much!</p>
			</div>
		</div><!-- end div .borderTop -->
		
		<hr>
		
		<h2 id="toc" class="alt">Table of Contents</h2>
		<ol class="alpha">
			<li><a href="#htmlStructure">HTML Structure</a></li>
			<li><a href="#cssFiles">CSS Files and Structure</a></li>
			<li><a href="#javascript">JavaScript</a></li>
			<li><a href="#credits">Sources and Credits</a></li>
		
		</ol>
		
		<hr>
		
		<h3 id="htmlStructure"><strong>A) HTML Structure</strong> - <a href="#toc">top</a></h3>
		<p>
                The jpCalendar is tied to a standard form input field and base on jQuery. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), If a date is chosen, feedback is shown as the input's value.
                </p>
		
		<img src="assets/images/htmlstructure.png" alt="HTML Structure" />
		
		<p>
                    jpcalendar.js and jquery file is a must
                    The theme can not set,You can manually add the CSS file, you would do the following:
                    
                </p>
                <pre>
&lt;link href="css/jpcalendar.css" rel="stylesheet" type="text/css"/&gt; 
                </pre>

		<hr>

		<h3 id="cssFiles"><strong>B) CSS Files and Structure</strong> - <a href="#toc">top</a></h3>

		<p>I'm using a CSS files in this theme. The first one is a generic reset file. </p> 

		<p>Here are 6 style file:jpcalendar.css,jpcalendarb.css,jpcalendarg.css,jpcalendarr.css,jpcalendary.css,jpcalendarz.css which represent different themes.</p>  
                <p>This 6 style file in the /css directory</p>
                <p>Of course, you can add your own style or modify an existing style</p>

		<hr>
		
		<h3 id="javascript"><strong>C) JavaScript</strong> - <a href="#toc">top</a></h3>
		
		<p>This theme imports three Javascript files.</p>
		
		<ol>
			<li>jQuery</li>
			<li>My custom scripts</li>
			
		</ol>
		  
		<ol>
			<li>jQuery is a Javascript library that greatly reduces the amount of code that you must write.</li>
                        <li>The jpcalendar.js file in the /js directory.The main code is in jpcalendar.js this file.Some example code, see <a href="demo.html">demo.html</a>
                               <pre>
Date: &lt;input type="text" id="jpcalender8" /&gt; 

               &lt;script type="text/javascript"&gt;

                    $(document).ready(function(){

                        $("#jpcalender8").jpCalendar({

                            yearEffect:"shake",//or "slide","move","fade","shake","none"

                            monthEffect:"shake",//or "slide","move","fade","shake","none"

                            isShowTime:false,

                            Format:"yyyy-MM-dd hh:mm:ss"
                        });

                    });

                &lt;/script&gt;
     
            
            </pre>
 <pre>
Date: &lt;input type="text" id="jpcalender6" /&gt; 

               &lt;script type="text/javascript"&gt;

                    $(document).ready(function(){

                        $("#jpcalender6").jpCalendar({

                            yearEffect:"shake",//or "slide","move","fade","shake","none"

                            monthEffect:"shake",//or "slide","move","fade","shake","none"

                            isShowTime:false,

                            position:"right" //or "top","bottom","left"

                    
                        });

                    });

                &lt;/script&gt;
     
            
            </pre>
                              <pre>
 Date: &lt;input type="text" id="jpcalender5" /&gt; 

               &lt;script type="text/javascript"&gt;

                    $(document).ready(function(){

                        $("#jpcalender5").jpCalendar({

                            yearEffect:"shake",//or "slide","move","fade","shake","none"

                            monthEffect:"shake",//or "slide","move","fade","shake","none"

                            isShowTime:false,

                            jpIsFullMonth:true,// or false

                            jpIsFullWeek:true, //or false

                            width:400
                        });

                    });

                &lt;/script&gt;
     
            
            </pre>
                            
			</li>

		</ol>
		
		<hr>
		
		<h3 id="credits"><strong>E) Sources and Credits</strong> - <a href="#toc">top</a></h3>
		
		<p>Images used in the /images directory.I've used the following images, icons or other files as listed.
		
		<ul>
			<li>down.png from file wujianping</li>
			<li>left.png from file wujianping</li>
			<li>right.png from file wujianping</li>
			<li>up.png from file wujianping</li>
                        <li>zdown.png from file wujianping</li>
			<li>zleft.png from file wujianping</li>
			<li>zright.png from file wujianping</li>
			<li>zup.png from file wujianping</li>
		</ul>
		
		
		
		<hr>
		
		<p>Once again, thank you so much for purchasing this jpCalendar. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.</p> 
		
		<p class="append-bottom alt large"><strong>wujianping</strong></p>
		<p><a href="#toc">Go To Table of Contents</a></p>
		
		<hr class="space">
	</div><!-- end div .container -->
</body>
</html>